<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card>
        <!-- 放置表单 -->
        <el-form ref="userForm" label-width="120px" :model="userInfo" :rules="rules" style="margin-left: 120px; margin-top:30px">
          <el-form-item label="姓名:" prop="username">
            <el-input v-model="userInfo.username" style="width:300px" />
          </el-form-item>

          <el-form-item label="手机">
            <el-input v-model="userInfo.mobile" disabled style="width:300px" />
          </el-form-item>

          <el-form-item label="入职时间">
            <el-date-picker
              v-model="userInfo.timeOfEntry"
              type="date"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>

          <el-form-item label="员工头像">
            <!-- 由于上传好的图片是在upload-img这个组件中，我们需要提交到后端的userinfo中，所以需要用到子传父 -->
            <!-- 父组件定义好geturl自定义事件 -->
            <!-- <upload-img :url="userInfo.staffPhoto" @get-url="getUrl" /> -->
            <!-- v-model优化 -->
            <upload-img v-model="userInfo.staffPhoto" />
          </el-form-item>
          <!-- 保存个人信息 -->
          <el-row class="inline-info" type="flex" justify="center">
            <el-col :span="12">
              <el-button type="primary" @click="save">保存更新</el-button>
              <el-button @click="$router.back()">返回</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入api接口--用户信息，之前已经写好，-----保存用户信息
import { getUserIdAPI, saveUserIdAPI } from '@/api/user'
export default {
  name: 'EmployeeDetail',
  data() {
    return {
      userInfo: {
        username: ''
      },
      // 表单对象数据
      rules: {
        // 给姓名做一个规则
        username: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.fetchDetail()
  },
  methods: {
    // 调用接口--渲染页面数据
    async fetchDetail() {
      // 利用query传参
      const res = await getUserIdAPI(this.$route.query.id)
      this.userInfo = res
    },
    // 点击保存更新--点击事件
    async save() {
      await saveUserIdAPI(this.userInfo)
      // 重新获取数据更新页面
      this.fetchDetail()
      this.$message.success('更新成功')
    }
    // getUrl(url) {
    //   // console.log(url)
    //   // 图片上传完毕之后 用于提交给后端 userinfo对应的字段里就有了有效的url
    //   this.userInfo.staffPhoto = url // 重新赋值
    // }
  }
}
</script>
